<!DOCTYPE html>

<html lang="en">
    <meta charset="UTF-8"/>
    <title>async</title>
    <style scoped>
        body {
            width: 100%;
            height: 100%;
            margin: 0;
            background-color: beige;
            overflow: auto;
        }

        #scroll-top-btn {
            background-color: aqua;
            text-align: center;
            padding: 10px;
            position: fixed;
            bottom: 10px;
            right: 10px;
            cursor: pointer;
            float: right;
        }
    </style>

    <body>
        <button id="scroll-top-btn">返回顶部</button>
    </body>

    <script>
        let btn = document.getElementById('scroll-top-btn')

        function createDivList() {
            for(let i=0; i < 1000; i++) {
                const newDiv = document.createElement('div')
                newDiv.style="height: 30px;line-height: 30px;color: white;background: rgba(0,0,0,70%);border-bottom: 2px solid white;"
                newDiv.innerText=`HAHAHAHAHA：${i}`
                document.body.appendChild(newDiv)
            }
        }
        createDivList()

        btn.addEventListener('click', () => {
            window.scroll({
                top: 0,
                behavior: 'smooth'
            })
        })

        document.addEventListener('scroll', (e) => {
            console.log('--监听页面滚动--', window.scrollY)

        })
    </script>
</html>